<template>
	<el-container style="overflow: hidden">
		<el-header class="main-header">
			<div class="float-left main-title">
				<img src="../../../assets/vform-logo.png"/>
				门户设计 <span class="version-span">Ver V1.0</span>
			</div>
			<div style="font-size: 16px;font-weight: 600;text-align: center;">{{ title }}</div>
			<div class="float-right external-link">
				<el-button @click="previewForm">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<el-icon-view style="height: 1.1em;width: 1.1em"/>
					</el-icon>
					预览
				</el-button>
				<el-button type="primary" @click="updateSysPortal">保存</el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<div style="display: inline-block;width: 50%;height: 100%">
				<el-main class="nopadding" style="height: 100%">
					<sc-code-editor ref="editor" v-model="layout" mode="javascript" height="100%" theme="darcula"
									:options="{autoRefresh: true}"></sc-code-editor>
				</el-main>
			</div>
			<div style="display: inline-block;width: 50%;position: absolute;">
				<el-main class="nopadding">
					<previewComponent :code="layout" ref="preview" :key="keyTime"></previewComponent>
				</el-main>
			</div>
		</el-main>
	</el-container>
</template>
<script>
import tool from '@/utils/tool';
import previewComponent from "./previewComponent";
import {defineAsyncComponent} from "vue";
const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor'));
export default {
	components: {
		scCodeEditor,
		previewComponent
	},
	data() {
		return {
			keyTime:'',
			title: '',
			portalId: this.$route.query.portalId,
			layout: "",
		}
	},
	mounted() {
		this.getSysPortalByPortalId();
		tool.crypto.SM2.encrypt("524E80BC-7F65-4AD5-8996-7AEB1042B4C3");
	},
	unmounted() {
	},
	methods: {

//加密的方法
		async getSysPortalByPortalId() {
			let res = await this.$API.system.sysPortal.getSysPortalByPortalId.get({portalId: this.portalId});
			if (res.code == 200) {
				this.title = res.data.title;
				this.layout = res.data.layout;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async updateSysPortal() {
			let res = await this.$API.system.sysPortal.updateSysPortal.post({
				portalId: this.portalId,
				layout: this.layout
			});
			if (res.code == 200) {
				this.$message.success(res.message);
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		previewForm(){
			this.keyTime = new Date().getTime();
			this.$nextTick(() => {
				this.$refs['preview'].load(this.$CONFIG.API_URL+"/get/system/"+this.portalId+"/portal.vue");
			})
		}

	}
}


</script>
<style lang="scss" scoped>
div.main-title {
	font-size: 18px;
	color: #242424;
	display: flex;
	align-items: center;
	justify-items: center;

	img {
		cursor: pointer;
		height: 36px;
	}

	span.bold {
		font-size: 20px;
		font-weight: bold;
		margin: 0 6px 0 6px;
	}

	span.version-span {
		font-size: 14px;
		color: #101F1C;
		margin-left: 6px;
	}
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}
</style>
